<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>邮箱密码登录</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			body {
				background-color: white;
			}
			/* 头部样式 */
			
			.top {
				height: 170px;
			}
			
			#a1 {
				color: #000000;
				display: block;
				margin: 15px 15px;
			}
			
			.top img {
				display: block;
				margin: 15px auto;
			}
			
			#name1 {
				display: block;
				margin: 15px auto;
				font-size: 20px;
				text-align: center;
			}
			/* 中部登录样式 */
			
			.mid {
				height: 230px;
			}
			
			.login-type input {
				width: 300px;
				height: 50px;
				display: block;
				margin: 15px auto;
				border-radius: 20px;
				background-color: #E9EBEC;
				text-align: center;
				border: none;
			}
			
			.login-type input[type="button"] {
				background-color: #6FD0F1;
				color: white;
			}
			/* 登录里面的箭头样式 */
			
			.login-type img {
				display: block;
				margin: 20px auto;
			}
			/* 登录按钮样式 */
			
			#email_login {
				width: 55px;
				height: 55px;
				border-radius: 50%;
				background-color: #398DEE;
				font-size: 25px;
				font-family: "微软雅黑";
				margin-top: 15%;
			}
			/* 底部样式 */
			
			.foot {
				width: 100%;
				margin-top: 40%;
				font-size: 13px;
				text-align: center;
				color: gray;
				position: absolute;
				bottom: 2%;
			}
			
			.foot a {
				color: #000000;
			}
		</style>
	</head>

	<body>
		<div class="top">
			<a href="index_login.html" id="a1"><span class="mui-icon mui-icon-arrowleft"></span></a>
			<img src="img/qianbi.png" width="40px" height="40px" />
			<span id="name1">BYTE NOTE</span>
		</div>

		<div class="mid">
			<div class="password">
				<div class="login-type">
					<input type="text" placeholder="请输入邮箱号" id="certificate" />
					<input type="password" placeholder="请输入邮箱密码" id="token" />
					<img src="img/login_right.png" width="55px" height="55px" id="login_right">
				</div>

			</div>
			<div class="yanzhen"></div>
		</div>

		<div class="foot">
			<span>登录即代表阅读同意<a>服务协议</a></span>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="js/mui.min.js"></script>
	<script>
		
		
		$("#login_right").click(function() {

			if($("#certificate").val() == "") { //判断邮箱
				mui.alert("邮箱不能为空")
				return false;
			}
			if(!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test($("#certificate").val())) {
				mui.alert("请输入正确的邮箱")
				return false;
			}

			var data = {}; //定义一个JQ对象，放添加弹窗表单的信息
			data.certificate = $("#certificate").val();
			data.token = $("#token").val();
			
			mui.plusReady(function(){
				plus.storage.setItem("myUrl1","http://338de254.cpolar.io");
			$.ajax({
				url: 'http://338de254.cpolar.io/note-user/certificate/mp_login',
				type: 'post',
				contentType: "application/json",
				data: JSON.stringify(data),
				success: function(d) {
					if(d.rs) {

						/*sessionStorage.setItem("accessToken", d.msg);*/

						plus.storage.setItem("accessToken", d.msg)

						mui.openWindow({
							url: 'tabbar.html',
							//传递的参数
							extras: {
								accessToken: "accessToken",
							}
						})
					} else {
						mui.alert(d.msg);
					}
				},
				error: function(xhr, type, errorThrown) {
					//异常处理；
					console.log(type);
				}
			})
			})


		})
	</script>

</html>